window.onload=function(){
    // 处于反面的页面display设置为none，目的是防止反面的输入框影响到正面的输入
    // 获取正反面标签以及label标签并存储到对应变量中
    var form = document.getElementsByClassName("form");
    var choose = document.getElementsByTagName("label")[0];
    var i = 1;
    // 设置点击响应事件
    choose.onclick = function () {
        form[i].style.display = "block";
        form[1 - i].style.display = "none";
        i = 1 - i;
    }
    //获取p，用于获得服务器响应后插入提示文字
    var L_user = document.getElementById("L_user");
    var R_phone = document.getElementById("R_phone");
    var R_user = document.getElementById("R_user");
    //获取含有输入信息的Input标签存入数组中，便于后续提取信息
    var content = document.getElementsByClassName("content");
    // 获取记住我的按钮
    var remeberME=document.getElementById("remeber-me");
    // 获取登录注册按钮
    var L_btn = document.getElementById("L_btn");
    var R_btn = document.getElementById("R_btn");
    // 当cookie有缓存时自动填入账号密码
    if(getCookie("username")){
        remeberME.checked=true;
        content[0].value=getCookie("username");
        content[1].value=getCookie("password");   
    }
    // 设置登录按钮点击响应事件
    L_btn.onclick = function () {
        // 如果记住我的按钮被选中,则缓存账户和密码信息
        if(remeberME.checked==true){
            setCookie("username",content[0].value,7);
            setCookie("password",content[1].value,7);
        }else{
            // 若没有选中,则删除账号密码信息的缓存
            deleteCookie("username");
            deleteCookie("password");
        }
        ajax({
            type: 'post',
            url: 'http://www.rushmc.top/api/login',
            data: {
                username: content[0].value,
                password: content[1].value
            },
            header: {
                'Content-Type': 'application/x-www-form-urlencode'
            },
            success: function (response) {
                L_user.style.textAlign = 'center';
                L_user.innerHTML = response.msg;
                if (response.code == 200) {
                    L_user.style.color = '#009432';
                } else {
                    // 当账号密码输入错误时,记住我按钮无效,不缓存错误信息
                    L_user.style.color = 'red';
                    deleteCookie("username");
                    deleteCookie("password");
                }
            }
        })
    }
    // 设置规范电话号码的输入
    // 离开焦点时的响应事件
    content[5].onblur = function () {
        var phone = this.value;
        // 设置电话号码的正则表达式
        var reg = /^1[34578][0-9]{9}$/;
        if (!reg.test(phone)) {
            R_phone.style.color = 'red';
            R_phone.innerHTML = '请输入正确格式的电话号码！';
            return;
        } else {
            R_phone.innerHTML = '';
        }
    }
    // 设置注册按钮单击响应事件
    R_btn.onclick = function () {
        R_user.innerHTML ="";
        var phone = content[5].value;
        // 设置电话号码的正则表达式
        var reg = /^1[34578][0-9]{9}$/;
        if (!reg.test(phone)) {
           return;
        }
        ajax({
            type: 'post',
            url: 'http://www.rushmc.top/api/register',
            data: {
                username: content[2].value,
                password: content[3].value,
                name: content[4].value,
                phone: content[5].value
            },
            header: {
                'Content-Type': 'application/x-www-form-urlencode'
            },
            success: function (response) {
                R_user.style.textAlign = 'center';
                R_user.innerHTML = response.msg;
                if (response.code == 200) {
                    R_user.style.color = '#009432';
                } else {
                    R_user.style.color = 'red';
                }
            }
        })
    }
}
 